<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head
    th:replace="fragments :: html_head('Categories | ShopWise Admin','none')"
  >
  </head>
  <body>
    <div th:replace="header :: header">Header</div>
    <div class="container-fluid">
      <div>
        <h2 class="heading">Manage Categories</h2>
        <hr />

        <!-- Category list features/controls  -->
        <div class="controls">
          <a
            class="btn btn-wise mb-3 mr-3"
            data-toggle="tooltip"
            data-placement="top"
            title="Create new Category"
            th:href="@{/categories/new}"
            ><i class="fas fa-folder-plus fa-2x icon-light"></i
          ></a>
          <a
            class="btn btn-wise mb-3 mr-3"
            data-toggle="tooltip"
            data-placement="top"
            title="Export to CSV File"
            th:href="@{/categories/export/csv}"
            ><i class="fa fa-file-csv fa-2x icon-light"></i
          ></a>
        </div>

        <!-- Search bar -->
        <div th:replace="fragments_search :: search_bar('/categories')">
          Search Bar
        </div>
        <!-- Messages  -->
        <div th:replace="fragments :: messages">Messages</div>
      </div>

      <!-- Full category details table -->
      <div class="full-details">
        <table
          class="
            table table-bordered table-striped table-hover table-responsive-xl
          "
        >
          <thead class="thead-dark">
            <tr>
              <th>ID</th>
              <th>Category Image</th>
              <th
                th:replace="fragments :: column_sort_link('/categories', 'name', 'Category Name', 'none')"
              />
              <th class="hideable-column">Alias</th>
              <th>Enabled</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr th:each="category : ${categories}">
              <td class="hideable-column">[[${category.id}]]</td>
              <td>
                <img
                  class="thumbnail-square"
                  th:src="@{${category.getImagePath}}"
                  alt="Category Image"
                />
              </td>
              <td>
                [[${category.name}]]<br />
                <div th:if="${category.parent != null}">
                  <span style="font-size: 12px">Parent:</span>
                  <span>[[${category.parent.name}]]</span>
                </div>
              </td>
              <td class="hideable-column">[[${category.alias}]]</td>
              <td>
                <div
                  class="action-controls"
                  th:replace="fragments :: action_status('/categories',${category})"
                >
                  Category toggle enabled
                </div>
              </td>
              <td>
                <div class="action-controls">
                  <div
                    th:replace="fragments :: action_edit('/categories',${category})"
                  >
                    Category edit
                  </div>
                  <div
                    th:replace="fragments :: action_delete('/categories',${category},${category.name},${category != null})"
                  >
                    Category delete
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Lesser user list table (small screens) -->
      <div class="less-details">
        <div class="row m-1" th:each="category: ${categories}">
          <div class="col-4">
            <img
              class="thumbnail-square"
              th:src="@{${category.getImagePath}}"
              alt=""
            />
          </div>
          <div class="col-8 text-center mt-4">
            <div>[[${category.name}]]</div>
            <div class="mt-2 action-controls">
              <div
                th:replace="fragments :: action_status('/categories',${category})"
              >
                Category toggle enabled
              </div>
              <div
                th:replace="fragments :: action_edit('/categories',${category})"
              >
                Category edit
              </div>
              <div
                th:replace="fragments :: action_delete('/categories',${category},${category.name},${category != null})"
              >
                Category delete
              </div>
            </div>
          </div>
        </div>
      </div>

      <div th:if="${keyword != null}" class="text-center">
        <span>Search result does not show categories in hierarchical form</span>
        <div
          th:replace="fragments_pagination :: pagination('/categories','Categories')"
        ></div>
      </div>

      <div th:unless="${keyword != null}">
        <div
          th:replace="fragments_pagination :: pagination('/categories', 'Top-level Categories')"
        >
          Standard Pagination
        </div>
      </div>

      <div th:replace="fragments_modal :: modal_confirm">
        Confirm Modal Dialog
      </div>

      <div th:replace="footer :: footer">Footer</div>
    </div>

    <script type="text/javascript" th:src="@{/js/list_functions.js}"></script>
  </body>
</html>
